<template>
	<div class="dialog-wrap">
		<div class="dialog-detail">
			<img src="@/assets/img/close.png" class="close" @click="close">
			<p class="title">充值</p>
			<div class="send-text">余额 <span>{{score}}</span>点算力</div>
			
			<ul>
				<li v-for="(item,index) in rechargelist" :key="item.id" :class="isActive == index ? 'current' : ''" @click="changeRecharge(item,index)">
					<div class="power">
						<img src="@/assets/img/power.png"/>
						<div>{{item.score}}点算力</div>
					</div>
					<div class="money">¥{{item.money}}</div>
				</li>
			</ul>
			
			<div class="tips">
				<p>1.你充值的算力永久有效</p>
				<p>2.算力充值不退不换</p>
			</div>
			<div class="submit" @click="submit">确定</div>
		</div>
	</div>
</template>

<script>
	import baseURL from '@/assets/js/basePath';
	import axios from 'axios'
	import {getRechargeList,pay} from '@/api/member'
	import utils from '@/assets/js/utils';
	export default {
		props: {
			studentList:{
				type: Array,
				default: ()=>[]
			},
			studentInfo:{
				type: Object,
				default: ()=>{}
			},
			sendType:{
				type: String,
				default:"single"
			},
			sendItem:{
				type: Object,
				default: ()=>{}
			}
		},

		data() {
			return {
				isActive:0,
				score:0,
				rechargelist:[],
				payInfo:{
					total_amount:0,
					payment_method:2,
					score_config_id:""
				}
			}
		},
		
		created() {
			this.getRechargeList()
		},
		
		methods: {
			changeRecharge(item,index){
				this.isActive = index;
				this.payInfo = {
					total_amount:item?.money,
					payment_method:2,
					score_config_id:item?.id
				}
			},
			
			async getRechargeList(){
				const {
					data,
					status
				} = await getRechargeList({});
				if (status !== 200) return;
				if(data.code == 200){
					this.rechargelist = data?.data?.list || [];
					this.score = data?.data?.score;
					if(this.rechargelist?.length){
						this.payInfo = {
							total_amount:this.rechargelist[0]?.money,
							payment_method:2,
							score_config_id:this.rechargelist[0]?.id
						}
					}
				}
				else{
					this.rechargelist = [];
					this.score = 0;
					this.$message.warning(data?.message || '获取失败');
				}
			},
			
			async submit(){
				// const {
				// 	data,
				// 	status
				// } = await pay(this.payInfo);
				// if (status !== 200) return;
				// if(data.code == 200){
					
				// }
				// else{
				// 	this.$message.warning(data?.message || '获取支付失败');
				// }
				const params = {
					...this.payInfo,
					token:utils.getSession('token')
				}
				const apiUrl = '/apiv2/pay/pay';
				axios({
				  baseURL:baseURL,
				  url:apiUrl,
				  method:"post",
				  data:params
				}).then(res => {
					console.log(res,"0000000")
					if(res.status == 200 && res.data){
						this.close();
						const divForm = document.getElementsByTagName('divform');
						if (divForm.length) {
							document.body.removeChild(divForm[0]);
						}
						const div = document.createElement('divform');
						div.innerHTML = res.data; // res.data就是sb支付宝返回给你的form
						document.body.appendChild(div);
						document.forms[0].setAttribute('target', '_blank');
						document.forms.alipay_submit.submit();
					}
					else{
						this.$message.warning('获取支付失败');
					}
				}).catch(() => {
				  this.$message.warning('获取支付失败');
				})
			},
			
			close() {
				this.$emit('close');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.dialog-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		z-index: 9;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		.dialog-detail {
			position: relative;
			width: 700px;
			padding: 30px;
			background: #FFFFFF;
			border-radius: 10px;
			.title{
				font-weight: 500;
				font-size: 24px;
				color: #333333;
				margin-bottom: 20px;
			}
			.send-text{
				font-size: 16px;
				color: #666666;
				span{
					color: #814600;
					font-size: 20px;
					font-weight: bold
				}
			}
			ul{
				@include flex-row;
				flex-wrap: wrap;
				margin: 20px 0;
				li{
					@include cursor-style;
					@include flex-row;
					flex-direction: column;
					width: 30%;
					margin-right: 30px;
					margin-top: 30px;
					padding: 30px 0;
					justify-content: center;
					align-items: center;
					border-radius: 16px;
					background: #f9f9f9;
					border: 1px solid rgba(0,0,0,.03);
					.power{
						@include flex-row;
						align-items: center;
						color: #814600;
						font-weight: 500;
						font-size: 16px;
						.img{
							margin-right: 10px;
						}
					}
					.money{
						color: #814600;
						font-weight: bold;
						font-size: 32px;
						margin-top: 16px;
					}
				}
				.current{
					background: linear-gradient(90deg, #fffaf1, #ffeccf);
					border: 1px solid #f7b252;
				}
				li:nth-child(3n){
					margin-right:0;
				}
				li:nth-child(-n+3){
					margin-top:0;
				}
			}
			.tips{
				p{
					font-size: 12px;
					line-height: 18px;
					color: #666666;
				}
				
			}
			.submit{
				@include cursor-style;
				width: 100%;
				height: 50px;
				line-height: 50px;
				margin-top: 20px;
				text-align: center;
				background: #FF8A00;
				border-radius: 5px 5px 5px 5px;
				font-size: 16px;
				color: #FFFFFF;
			}
			
			.close {
				position: absolute;
				right: 20px;
				top: 20px;
				width: 20px;
				height: 20px;
				cursor: pointer;
			}
		}
	}
</style>
